// Name:            Search
// Description:     Defines a search component
//
// Component:       `uk-search`
//
// Sub-objects:     `uk-search-field`
//
// Modifier:        (Nav) `uk-nav-search`
//                  (Dropdown) `uk-dropdown-search`
//
// States:          `uk-active`
//                  `uk-loading`
//
// Uses:            Animation
//                  Icon: FontAwesome
//                  Navbar: `uk-navbar-flip`
//
// Used by:         Off-canvas
//
// Markup:
//
// <!-- uk-search addon -->
// <form class="uk-search" data-uk-search>
//     <input class="uk-search-field" type="search" placeholder="">
// </form>
//
// ========================================================================


// Variables
// ========================================================================

@search-width: 120px;
@search-focus-width: 180px;
@search-height: 30px;
@search-padding: 30px;
@search-border: rgba(0, 0, 0, 0);
@search-border-width: 1px;
@search-background: rgba(0, 0, 0, 0);
@search-color: #444;
@search-placeholder-color: #999;

@search-icon: "\f002";
@search-icon-size: 14px;
@search-icon-color: rgba(0, 0, 0, 0.2);

// Dropdown modifier
@dropdown-search-width: 300px;
@dropdown-search-margin-top: 0;
@dropdown-search-background: #f5f5f5;
@dropdown-search-color: #444;
@dropdown-search-animation: uk-slide-top-fixed;
@dropdown-search-navbar-margin-top: 5px;
@dropdown-search-navbar-margin-right: -15px;

// Nav modifier
@nav-search-color: #444;
@nav-search-active-background: #00a8e6;
@nav-search-active-color: #fff;
@nav-search-header-color: #999;
@nav-search-divider-border: #ddd;
@nav-search-divider-border-width: 1px;
@nav-search-nested-color: #07D;
@nav-search-nested-hover-color: #059;

// Search in offcanvas
@offcanvas-search-margin: 20px 15px;
@offcanvas-search-background: #1a1a1a;
@offcanvas-search-border: rgba(0, 0, 0, 0);
@offcanvas-search-color: #ccc;
@offcanvas-search-placeholder-color: #777;
@offcanvas-search-icon-color: #777;


/* ========================================================================
   Component: Search
 ========================================================================== */

/*
 * 1. Create position context for dropdowns
 * 2. Needed for `form` element
 */

.uk-search {
  display: inline-block;
  /* 1 */
  position: relative;
  /* 2 */
  margin: 0;
  .hook-search;
}

/*
 * Icon
 */

.uk-search:before {
  content: @search-icon;
  position: absolute;
  top: 0;
  left: 0;
  width: @search-padding;
  line-height: @search-height;
  text-align: center;
  font-family: FontAwesome;
  font-size: @search-icon-size;
  color: @search-icon-color;
  .hook-search-icon;
}


/* Sub-object `uk-search-field`
 ========================================================================== */

/*
 * Removes inner padding and border in Firefox 4+.
 */

.uk-search-field::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * Remove inner padding and search cancel button in Chrome, Safari and Opera on OS X.
 */

.uk-search-field::-webkit-search-cancel-button,
.uk-search-field::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes cancel button in IE10
 */

.uk-search-field::-ms-clear {
  display: none;
}

/*
 * Removes placeholder transparency in Firefox.
 */

.uk-search-field::-moz-placeholder {
  opacity: 1;
}

/*
 * 1. Define consistent box sizing.
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Correct `font` properties and `color` not being inherited.
 * 5. Remove default style in iOS.
 * 6. Style
 */

.uk-search-field {
  /* 1 */
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* 2 */
  margin: 0;
  /* 3 */
  border-radius: 0;
  /* 4 */
  font: inherit;
  color: @search-color;
  /* 5 */
  -webkit-appearance: none;
  /* 6 */
  width: @search-width;
  height: @search-height;
  padding: 0 0 0 @search-padding;
  border: @search-border-width solid @search-border;
  background: @search-background;
  -webkit-transition: all linear 0.2s;
  transition: all linear 0.2s;
  vertical-align: middle;
  .hook-search-field;
}

/* Placeholder */
.uk-search-field:-ms-input-placeholder {
  color: @search-placeholder-color !important;
}

.uk-search-field::-moz-placeholder {
  color: @search-placeholder-color;
}

.uk-search-field::-webkit-input-placeholder {
  color: @search-placeholder-color;
}

/* Focus */
.uk-search-field:focus {
  outline: 0;
  .hook-search-field-focus;
}

/* Focus + Active */
.uk-search-field:focus,
.uk-search.uk-active .uk-search-field {
  width: @search-focus-width;
}


/* Dropdown modifier: `uk-dropdown-search`
 ========================================================================== */

.uk-dropdown-search {
  width: @dropdown-search-width;
  margin-top: @dropdown-search-margin-top;
  background: @dropdown-search-background;
  color: @dropdown-search-color;
  .hook-dropdown-search;
}

.uk-open > .uk-dropdown-search {
  -webkit-animation: @dropdown-search-animation 0.2s ease-in-out;
  animation: @dropdown-search-animation 0.2s ease-in-out;
}

/*
 * Dependency `uk-navbar-flip`
 */

.uk-navbar-flip .uk-dropdown-search {
  margin-top: @dropdown-search-navbar-margin-top;
  margin-right: @dropdown-search-navbar-margin-right;
}


/* Nav modifier `uk-nav-search`
 ========================================================================== */

/*
 * Items
 */

.uk-nav-search > li > a {
  color: @nav-search-color;
  .hook-nav-search;
}

/*
 * Active
 * 1. Remove default focus style
 */

.uk-nav-search > li.uk-active > a {
  background: @nav-search-active-background;
  color: @nav-search-active-color;
  /* 1 */
  outline: none;
  .hook-nav-search-active;
}

/*
 * Sub-object: `uk-nav-header`
 */

.uk-nav-search .uk-nav-header {
  color: @nav-search-header-color;
  .hook-nav-search-header;
}

/*
 * Sub-object: `uk-nav-divider`
 */

.uk-nav-search .uk-nav-divider {
  border-top: @nav-search-divider-border-width solid @nav-search-divider-border;
  .hook-nav-search-divider;
}

/*
 * Nested items
 */

.uk-nav-search ul a {
  color: @nav-search-nested-color;
}

.uk-nav-search ul a:hover {
  color: @nav-search-nested-hover-color;
}


/* Search in offcanvas
 ========================================================================== */

.uk-offcanvas .uk-search {
  display: block;
  margin: @offcanvas-search-margin;
}

.uk-offcanvas .uk-search:before {
  color: @offcanvas-search-icon-color;
}

.uk-offcanvas .uk-search-field {
  width: 100%;
  border-color: @offcanvas-search-border;
  background: @offcanvas-search-background;
  color: @offcanvas-search-color;
  .hook-offcanvas-search-field;
}

.uk-offcanvas .uk-search-field:-ms-input-placeholder {
  color: @offcanvas-search-placeholder-color !important;
}

.uk-offcanvas .uk-search-field::-moz-placeholder {
  color: @offcanvas-search-placeholder-color;
}

.uk-offcanvas .uk-search-field::-webkit-input-placeholder {
  color: @offcanvas-search-placeholder-color;
}


// Hooks
// ========================================================================

.hook-search-misc;

.hook-search() {
}

.hook-search-icon() {
}

.hook-search-field() {
}

.hook-search-field-focus() {
}

.hook-dropdown-search() {
}

.hook-nav-search() {
}

.hook-nav-search-active() {
}

.hook-nav-search-header() {
}

.hook-nav-search-divider() {
}

.hook-offcanvas-search-field() {
}

.hook-search-misc() {
}